<!--
 * @Author: Bobby
 * @Date: 2021-12-30 10:01:42
 * @LastEditTime: 2022-03-22 14:43:01
 * @LastEditors: Bobby
 * @Description:
 * @FilePath: \wms-v2\src\ve\elements\basic\uiCollapse\uiCollapse.vue
 * CIMC-V2
-->
<template>
  <el-collapse
    :ref="info._id"
    v-model="activeName"
    v-ui-ref="vSetRef"
    :accordion="info.extension.accordion.value"
    class="uiCollapse"
    @change="handleClick"
  >
    <!-- <template v-for="(item, index) in info.list" :key="index"> -->
    <el-collapse-item v-for="(item, index) in info.list" :key="index" :name="item._id" :title="item.label">
      <!-- :style="{ height: getLayerPageHeight }" -->
      <div class="w-full scrollbar--light">
        <Widget :list="item.list" />
      </div>
    </el-collapse-item>
    <!-- </template> -->
  </el-collapse>
</template>
<script>
  import { defineComponent, defineAsyncComponent } from 'vue'
  import { actionsTask } from '@ve/eventTask/index'
  import { UiMixin, RefsInjectMixin } from '@ve/mixin'
  import { componentId } from '@/utils/unique'
  import isArray from 'lodash/isArray'
  import toNumber from 'lodash/toNumber'
  import trim from 'lodash/trim'
  export default defineComponent({
    name: 'UiCollapse',
    components: {
      // 使用异步组件
      Widget: defineAsyncComponent(() => import('@ve/components/widget.vue')),
    },
    mixins: [UiMixin, RefsInjectMixin],

    data() {
      return {
        activeName: '',
      }
    },
    computed: {
      // getLayerPageHeight() {
      //   let dom = document.querySelector('.layer-page')
      //   return `${this.hasPreview ? (dom ? dom.clientHeight - 60 : 0) + 'px' : 'auto'}`
      // },
    },
    mounted() {
      if (!this.hasPreview) {
        this.info.list.forEach((row) => {
          if (!row._id) {
            row._id = `collapse_${componentId(6)}`
          }
          row._pid = this.info._id
        })
      }
      if (this.info.extension?.activeName?.value) {
        // 解析配置的默认展开项
        const activeNameList = this.info.extension?.activeName?.value.split(',')
        if (this.info.extension?.accordion?.value) {
          // 如果为手风琴模式 则只取第一项默认展开
          this.activeName = this.info.list[toNumber(trim(activeNameList[0]))]?._id
        } else {
          let activeName = []
          activeNameList.forEach((item) => {
            activeName.push(this.info.list[toNumber(trim(item))]?._id)
          })
          this.activeName = activeName
        }
      }
    },
    methods: {
      handleClick(e) {
        this.$pub(`SplitpaneResized_${this.previewPageId()}`, true)
        // console.log(e, this.activeName)
        // console.log('this.info --------------- ', this.info)
        // 执行交互事件
        if (!this.hasPreview) return
        if (isArray(e)) {
          // 如果当前激活项是多项，则遍历触发
          e.forEach((item) => {
            this.runActions(item)
          })
        } else {
          // 如果是字符串则直接调用
          this.runActions(e)
        }
      },
      runActions(_id) {
        this.info.list.forEach((item) => {
          if (item._id === _id) {
            setTimeout(() => {
              this.$pub(`SplitpaneResized_${this.previewPageId()}`, true)
              this.onHandClick()
              if (item.actions) {
                actionsTask(this, this.info, item.actions, {}, () => {
                  console.log('collapse 完成了')
                })
              }
            }, 100)
          }
        })
      },
      $selectPage(id) {
        this.activeName = id
      },
    },
  })
</script>
